// Popup styling

.popup-arrow {
    &.up { border-bottom-color: @popup-light-color; }
    &.down { border-top-color: @popup-light-color; }
    &.left { border-right-color: @popup-light-color; }
    &.right { border-left-color: @popup-light-color; }
}

.popup {
    background-color: @popup-light-color;
    color: @popup-light-text;
    box-shadow: 0px 0px 42px -10px rgba(0,0,0,0.5);
    border-radius:2px;

    // Generic links
    a.button {
      line-height: 150%;
      border: none;
      border-radius: @border-radius;
      padding: 2px 10px;
      background-color: @grey-1;
      color: @grey-7;
      border-radius: @border-radius;
      outline:0;
      transition: 0.2s all ease;
      &:hover { background-color:@c-primary; color: @bg-primary; }
    }

    // TOC links
    a.toc-link {
        color: @popup-light-text;
        transition:0.4s all ease;
        text-decoration:none;
        line-height:150%;
        &:hover {
            background-color:@grey-0;
            transition:0.4s all ease;
        }
    }

    p {text-align:center; }

    button {
        border:none;
        font-size:200%;
        background-color: @popup-light-color;
        color: @popup-light-text;
        text-align:center;
    }

    // Elements inside popups
    form {
        input {
            background-color: transparent;
            color:inherit;
            font-size:200%;
            border:none;
            text-align:center;

            &.small {
                font-size:140%;
                text-align:left;
            }
        }
    }

    // Formatting
    .formatting {
        a {
            text-decoration:none;
            color:inherit;

            &:hover { background-color:@grey-0; }

            &#header-formatting:hover { background-color:transparent; }

            span.markdownHeading1, span.markdownHeading2, span.markdownHeading3,
            span.markdownHeading4, span.markdownHeading5, span.markdownHeading6 {
                text-align:center;
                font-weight:bold;

                &.active { color:@c-primary; }
            }
        }

        hr { border-bottom:1px solid @grey-3; }
    }

    // SEARCH POPUP
    .search {
        input {
            font-size:100%;
            text-align:left;
            background-color: transparent;
            color:inherit;

            &.regexp { color: @c-primary; }
        }

        .row:first-child input:first-child {
          border-bottom:1px solid @grey-5;
        }

        button {
            border-radius:2px;
            font-size:@font-size-small;
            background-color:@grey-0;

            &:hover { background-color:@grey-1; }
        }
    }

    // Pomodoro timer
    .pomodoro {
        .pomodoro-task  { color: @pomodoro-task; }
        .pomodoro-short { color: @pomodoro-short; }
        .pomodoro-long  { color: @pomodoro-long; }
    }

    // Footnote edit popup
    .footnote-edit textarea {
        background-color:transparent;
        color:inherit;
        font-size:@font-size-base;
    }
}
